<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <!--
        定位：
            定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。

            通过position属性来设置元素的定位：可选值为：
            static 默认值，元素没有开启定位
            relative 开启元素的相对定位
            absolute 开启元素的绝对定位
            fixed 开启元素的固定定位（也是绝对定位的一种）

            相对定位：是相对于元素在文档流中原来的位置进行定位，相对定位的元素不会脱离文档流， 相对定位会使元素提升一个层级（定位的元素一定会盖住文档流中的元素）。

            相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。
    -->
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /*
                当元素的position属性设置为relative时，则开启了元素的相对定位
                1. 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何改变
                2. 可以通过left top right bottom四个属性来设置元素的偏移量
                    left: 元素相对于其定位位置的左侧偏移量
                    right: 元素相对于其定位位置的右侧偏移量
                    top: 元素相对于其定位位置的上侧偏移量
                    bottom 元素相对于其定位为止的下侧偏移量

                    通常偏移量只需要使用两个，就可以对一个元素进行定位了，一般会选择一个水平方向和垂直方向的偏移量来为元素进行定位。

            */
            position: relative;
            left: 50px;
            top:100px;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <!--div.box$*3-->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>